<script>
export default {
  name: "lifeCycle",
  data() {
    return {
      msg: '这是内容'
    }
  },
  methods: {},

  // 生命周期
  // 1.beforeCreat 创建之前，data和methods中的数据还没有初始化
  // 作用：页面重定向
  beforeCreate() {
    console.log('beforeCreate')
    console.log(this)  //vue实例化对象
    console.log(this.msg)  //undefined
  },

  // 2.created 创建之后，data和methods中的数据初始化完成，是第一能拿到data和methods中的数据的生命周期
  // 作用：数据初始化，接口请求
  created() {
    console.log('created')
    console.log(this.msg)
    this.msg = 'hhhh'
  },


  // 3.beforeMount 挂载虚拟dom
  beforeMount() {
    console.log('beforeMount')
    console.log(document.getElementById('box')) //null
  },

  // 4.mounted 挂载真实的dom，是第一个可以真实操作dom元素的生命周期
  mounted() {
    console.log('mounted')
    console.log(document.getElementById('box'))
  },

  // beforeUpdate和updated会执行0次或更多次
  // 5.beforeUpdate 页面更新前  data和页面中的数据还未保持同步，data中的数据是最新的，页面中的数据是旧的
  beforeUpdate() {
    console.log('beforeUpdate')
  },

  // 6.updated 页面更新后，data和页面中的数据都是最新的，保持一致
  updated() {
    console.log('updated')
  },

  // 7.beforeDestroy 页面销毁前， 页面还未真正销毁
  // 作用：清除定时器和页面监听
  beforeDestroy() {
    console.log('beforeDestroy')
  },

  // 8.destroyed 页面销毁后
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<template>
  <div>生命周期
    <p id="box">{{ msg }}</p>
    <input type="text" v-model="msg">
    <router-link to="/filter">filter</router-link>
  </div>

</template>

<style scoped lang="less">

</style>